'use client'
import React, { useEffect } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
import { CloudUploadOutlined } from '@ant-design/icons'
import Cookies from 'js-cookie';
import keyStore from '@/app/store/key';
import dataStore from '@/app/store/data';

interface Upload {
    id: string;
    setdata: (value: boolean) => void
}



const App: React.FC<Upload> = ({ id, setdata }) => {
    const { Dragger } = Upload;
    const { data } = dataStore()
    const { RAGFlowKey } = keyStore()
    const [fileList, setFileList] = React.useState<any>([])
    useEffect(() => { 
        setFileList([])
    }, [])

    const props: UploadProps = {
        name: 'file',
        multiple: true,
        action: `/RAGflow/api/v1/datasets/${id}/documents`,
        headers: {
            'Authorization': `Bearer ${RAGFlowKey}`,
        },
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
            }
            if (status === 'done') {
                setdata(false)
                message.success(`${info.file.name} 上传成功`);
            } else if (status === 'error') {
                message.error(`${info.file.name} 上传失败`);
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };

    return <Dragger {...props} defaultFileList={fileList}>
        <p className="ant-upload-drag-icon">
            <InboxOutlined />
        </p>
        <p className="ant-upload-text"><CloudUploadOutlined />拖拽文件至此，或者选择文件</p>
        <p className="ant-upload-hint">
            支持单个或批量上传。严格禁止上传公司数据或其他被禁文件。
        </p>
    </Dragger>
}

export default App;

